<breadcrumb />

<mat-card>
  <mat-card-content>
    <section>
      <h2>Basic input box (e.g. name field)</h2>
      <mat-form-field>
        <mat-label>First name</mat-label>
        <input matInput [(ngModel)]="firstName" />
      </mat-form-field>
      <mat-form-field>
        <mat-label>Last name</mat-label>
        <input matInput [(ngModel)]="lastName" />
      </mat-form-field>
    </section>

    <section>
      <h2>Input with hint (e.g. password field)</h2>
      <mat-form-field hideRequiredMarker>
        <mat-label>Password</mat-label>
        <input
          matInput
          [type]="passwordType"
          [(ngModel)]="password"
          required
          #passwordModel="ngModel"
        />
        <button
          mat-icon-button
          matSuffix
          [attr.aria-label]="passwordToggleLabel"
          (click)="showPassword = !showPassword"
        >
          <mat-icon>{{ passwordToggleIcon }}</mat-icon>
        </button>
        <mat-hint>Hint: favorite color</mat-hint>
        @if (passwordModel.hasError('required')) {
          <mat-error>You must enter your password.</mat-error>
        }
      </mat-form-field>
    </section>

    <section>
      <h2>Input with error message (e.g. email field)</h2>
      <mat-form-field>
        <mat-label>Email</mat-label>
        <input matInput type="email" [(ngModel)]="email" required email #emailModel="ngModel" />
        @if (emailModel.hasError('required')) {
          <mat-error>You must enter your email.</mat-error>
        }
        @if (emailModel.hasError('email')) {
          <mat-error>Not a valid email address.</mat-error>
        }
      </mat-form-field>
    </section>

    <section>
      <h2>Input with prefix & suffix (e.g. currency converter)</h2>
      <mat-form-field floatLabel="always">
        <mat-label>USD</mat-label>
        <input matInput type="number" [(ngModel)]="usd" />
        <span matTextPrefix>$</span>
      </mat-form-field>
      =
      <mat-form-field floatLabel="always">
        <mat-label>JPY</mat-label>
        <input matInput type="number" [(ngModel)]="jpy" />
        <span matTextPrefix>‎¥‎</span>
      </mat-form-field>
      (as of 7/31/2017)
    </section>

    <section>
      <h2>Textarea input (e.g. comment box)</h2>
      <mat-form-field>
        <textarea
          matInput
          aria-label="Comment"
          [(ngModel)]="comment"
          cdkTextareaAutosize
          [maxlength]="commentMax"
          #commentModel="ngModel"
        ></textarea>
        <mat-hint>Leave us a comment!</mat-hint>
        <mat-hint align="end">{{ commentCount }}/{{ commentMax }}</mat-hint>
      </mat-form-field>
    </section>
  </mat-card-content>
</mat-card>
